<template>
  <div class="invitation">
    <div class="container">
      <ul class="invitation-form">
        <li class="invitation-option van-hairline--surround">
          <img src="@assets/images/icon_phone.png" alt="" />
          <van-field v-model="phone" clearable maxlength="11" placeholder="请输入您的手机号码" />
        </li>
        <li class="invitation-option van-hairline--surround">
          <van-field v-model="smsCode" clearable maxlength="6" placeholder="请输入验证码">
            <template #button>
              <SmsBtn color="#FE9100" plain size="small" :border="false" :phone="phone" />
            </template>
          </van-field>
        </li>
      </ul>
      <van-button color="#FE9100" block round :disabled="btnDisabled" class="invitation-btn" @click="submit">提交</van-button>
      <!-- <div class="qrcode">
        <img src="@assets/images/qrcode.jpeg" alt="" />
        <p>扫码关注<span>“腾云公众号” </span><br />免费获取企业服务</p>
      </div> -->
    </div>
  </div>
</template>

<script>
import SmsBtn from '@components/smsBtn';
import { Dialog, Field, Button, Toast } from 'vant';
import { login_inviteRegister, login_getUserIdByOpenId } from '@api/user';

export default {
  components: {
    [Button.name]: Button,
    [Field.name]: Field,
    SmsBtn
  },
  data() {
    return {
      phone: '',
      smsCode: '',
      btnDisabled: false
    };
  },
  mounted() {
    this.isHasSuperior();
  },
  methods: {
    async isHasSuperior() {
      const { openId } = this.$store.state;
      let res = await login_getUserIdByOpenId({ openId });
      if (res.code === 200 && res.data) {
        Dialog.alert({
          title: '温馨提示',
          message: '您的微信已经在平台注册过，\n自动进入个人中心！',
          theme: 'round',
          confirmButtonColor: '#f09637'
        }).then(() => {
          this.$router.push('/mine');
        });
      }
    },
    async submit() {
      const { shareId } = this.$route.query;
      const { phone, smsCode } = this;
      if (!/^1[3456789]\d{9}$/.test(phone)) {
        Toast('请输入正确的手机号');
      } else if (!smsCode) {
        Toast('请输入验证码');
      } else {
        this.btnDisabled = true;
        let res = await login_inviteRegister({ shareId, phone, smsCode, openId: this.$store.state.openId });
        this.btnDisabled = false;
        if (res.code === 200) {
          this.$router.replacePage('/guide');
        } else {
          Toast(res.msg);
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.invitation {
  background: url('../../assets/images/login_bg.png') no-repeat top;
  background-size: contain;
  padding: 275px 32px 0;
  box-sizing: border-box;
  .container {
    height: calc(100vh - 275px);
    padding: 40px 32px;
    background: #fff;
    box-shadow: 0px 5px 22px 0px rgba(41, 47, 61, 0.1);
    border-radius: 18px;
    box-sizing: border-box;
  }
}
.invitation-option {
  height: 72px;
  display: flex;
  align-items: center;
  padding: 0 20px 0 40px;
  margin-bottom: 30px;
  font-size: 24px;
  &:after {
    border-radius: 36px;
  }
  img {
    height: 26px;
    margin-right: 16px;
  }
  .van-cell {
    flex: 1;
    padding: 0;
    box-sizing: border-box;
  }
  .duty-list {
    display: flex;
    align-items: center;
    margin-left: 16px;
    li {
      width: 108px;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #596880;
      margin-right: 20px;
      border-radius: 6px;
      &:after {
        border-radius: 12px;
      }
      &.active {
        background: #fe9100;
        color: #fff;
        &:after {
          border-color: #fe9100;
        }
      }
    }
  }
}
.invitation-btn {
  height: 80px;
  line-height: 80px;
  margin-top: 46px;
  font-weight: bold;
}
.qrcode {
  overflow: hidden;
  text-align: center;
  font-size: 26px;
  line-height: 40px;
  color: #242932;
  img {
    width: 218px;
    height: 218px;
    margin: 36px 0;
  }
  span {
    color: #fd9100;
  }
}
.dialog-container {
  padding: 0 42px 40px;
  line-height: 42px;
  font-size: 28px;
  color: #292f3d;
  ul {
    line-height: 60px;
    margin-bottom: 15px;
  }
  .btn-wrapper {
    display: flex;
    button {
      flex: 1;
      margin: 80px 15px 0;
      height: 80px;
      line-height: 80px;
    }
  }
}
</style>
